<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>长春金桥软件培训</title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="author" content="duanliang, duanliang920.com" />
    <link rel="stylesheet" th:href="@{{path}static/login/bootstrap.min.css(path=${rootPath})}" href="static/login/bootstrap.min.css"/>
    <link rel="stylesheet" th:href="@{{path}static/login/css/camera.css(path=${rootPath})}" href="static/login/css/camera.css"/>
    <link rel="stylesheet" th:href="@{{path}static/login/bootstrap-responsive.min.css(path=${rootPath})}" href="static/login/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" th:href="@{{path}static/login/matrix-login.css(path=${rootPath})}" href="static/login/matrix-login.css"/>
    <link rel="stylesheet" th:href="@{{path}static/login/font-awesome.css(path=${rootPath})}" href="static/login/font-awesome.css"/>
    <script type="text/javascript" th:src="@{{path}static/login/js/jquery-1.5.1.min.js(path=${rootPath})}" src="static/login/js/jquery-1.5.1.min.js"></script>

    <style type="text/css">
        /*
       body{
        -webkit-transform: rotate(-3deg);
        -moz-transform: rotate(-3deg);
        -o-transform: rotate(-3deg);
        padding-top:20px;
        }
        */
        .cavs {
            z-index: 1;
            position: fixed;
            width: 95%;
            margin-left: 20px;
            margin-right: 20px;
        }
        .rule_set {
            width: 90%;
            text-align: left;
            margin-left: 20px;
        }
        .rule1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 18px;
            margin-bottom: 10px;
        }
    </style>
    <style>
        body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
        .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
    </style>
</head>
<body style="background-color: #d1e8ff">
<canvas class="cavs"></canvas>

<div style="display: none">
    <!--<form id="eventlogin" action="#" methd="GET" th:action="@{{path}TurntableController/login(path=${rootPath})}"></form>-->
    <form id="eventlogin" action="#" method="post" th:action="@{{path}TurntableController/submitlogin(path=${rootPath})}">
        <input type="hidden" id="param1" name="mobilePhone" value="" />
        <input type="hidden" id="param2" name="password" value="" />
        <input type="hidden" id="param3" name="code" value="" />
    </form>
</div>

<div style="width:100%;text-align: center;margin: 0 auto;position: absolute;"><!-- 背景 -->
    <!-- 注册 -->
    <div id="windows2">
        <div id="loginbox">
            <!--<form th:action="@{{path}TurntableController/submitregister(path=${rootPath})}" action="#" method="post" id="registerForm">-->
            <form action="#" id="registerForm">

                <div class="control-group normal_text">
                    <h3>
                        <img src="static/login/logo.png" th:src="@{{path}static/login/logo.png(path=${rootPath})}"
                             alt="Logo"/>
                    </h3>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <div class="main_input_box">
							<span class="add-on bg_lg">
							<i>姓名</i>
							</span><input type="text" name="username" id="username" value="" maxlength="4" placeholder="请输入姓名"/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <div class="main_input_box">
							<span class="add-on bg_lg">
							<i>手机</i>
							</span><input type="text" name="mobilePhone" id="mobilePhone" value="" maxlength="11" placeholder="请输入手机号码"/>
                        </div>
                    </div>
                </div>
                <!--
                <div class="control-group">
                    <div class="controls">
                        <div class="main_input_box">
							<span class="add-on bg_ly">
							<i>密码</i>
							</span><input type="password" name="password" id="password" placeholder="请输入密码"
                                          class="keypad" keypadMode="full" allowKeyboard="true" value=""/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <div class="main_input_box">
							<span class="add-on bg_ly">
							<i>重输</i>
							</span><input type="password" name="chkpwd" id="chkpwd" placeholder="请重新输入密码" class="keypad"
                                          keypadMode="full" allowKeyboard="true" value=""/>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <div class="main_input_box">
							<span class="add-on bg_lg">
							<i>邮箱</i>
							</span><input type="text" name="email" id="email" value="" placeholder="请输入邮箱"/>
                        </div>
                    </div>
                </div>
                -->
                <div class="form-actions">
                    <div style="width:86%;padding-left:8%;">
                        <div style="float: left;padding-top:2px;">
                            <i><img src="static/login/yan.png" th:src="@{{path}static/login/yan.png(path=${rootPath})}"/></i>
                        </div>
                        <div style="float: left;" class="codediv">
                            <input type="text" name="code" id="code" class="login_code" style="height:16px; padding-top:4px;"/>
                        </div>
                        <div style="float: left;">
                            <i><img style="height:26px;" id="zcodeImg" alt="点击更换" title="点击更换" src="captcha/captchaImage?type=math" th:src="@{{path}captcha/captchaImage?type=math(path=${rootPath})}"/></i>
                        </div>
                        <!--<span class="pull-right" style="padding-right:3%;"><a href="javascript:changepage(2);" class="btn btn-success">取消</a></span>-->
                        <span class="pull-right"><a onclick="register();" class="flip-link btn btn-info" id="to-recover">注册</a></span>
                    </div>
                </div>
            </form>
            <!--
            <div class="controls">
                <div class="main_input_box">
                    <font color="white"><span id="nameerr">Copyright © FHqq313596790 2100</span></font>
                </div>
            </div>
            -->
        </div>
    </div>
    <div class="rule_set">
        <div class="rule1">活动规则</div>
        <div class="rule2">1. 活动时间：即日起至2018年12月30日。</div>
        <div class="rule2">2. 活动说明：
            <ul>
                <li>凡在活动期间报名入学的同学都可获得一次大转盘抽奖机会，抽奖机会限当天使用。</li>
                <li>奖品数量有限，先到先得, 奖品发放将以注册的手机号码为准。</li>
                <li>凡参与本活动者，即视为接受活动所有规则。</li>
            </ul>
        </div>
        <div class="rule2">3. 金桥对本次活动享有最终解释权</div>
    </div>
</div>

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">
</div>

<!-- 弹窗 -->
<script th:src="@{{path}static/admin/assets/js/layer/layer.js(path=${rootPath})}" type="text/javascript"></script>

<script type="text/javascript">
    var message = "[[${message}]]";
    if ("" != message) {
        layer.msg(message, {
            time: 3000
        })
    }
    $('#codeImg').click(function () {
        var url = "[[${rootPath}]]captcha/captchaImage?type=math&s=" + Math.random();
        $("#codeImg").attr("src", url);
    });

    $('#zcodeImg').click(function () {
        var url = "[[${rootPath}]]captcha/captchaImage?type=math&s=" + Math.random();
        $("#zcodeImg").attr("src", url);
    });

    function register() {
        var uname = $("#username").val();
        var phone = $("#mobilePhone").val();
        var code = $("#code").val();
        // var passwd = $("#password").val();
        // var chkpwd = $("#chkpwd").val();
        // var email = $("#email").val();


        // if (passwd != chkpwd) {
        //     var message = "两次输入的密码不一致";
        //     layer.msg(message, {
        //         time: 3000
        //     })
        //     return;
        // }

        var name_reg=/^[\u4e00-\u9fa5]{2,4}$/;
        if(!name_reg.test(uname)){
            layer.msg("姓名只能用汉字,长度2-4位", {
                time: 3000
            })
            return false;
        }

        var phone_reg=/^1[3|4|5|7|8][0-9]\d{8}$/;
        if(!(phone_reg.test(phone) && phone.length == 11)){
            layer.msg("请填写正确的11位手机号", {
                time: 3000
            })
            return false;
        }

        //var data = {"mobilePhone": phone, "username": uname, "password": passwd, "email": email, "code": code};
        var data = {"mobilePhone": phone, "username": uname, "code": code};
        $.ajax({
            type: "POST",
            url: "[[${rootPath}]]TurntableController/submitregister",
            data: data,
            dataType: "json",
            success: function (data) {
                if (data.code == 500) { // 注册失败
                    layer.msg(data.msg, {
                        time: 3000
                    })
                }else{
                    layer.msg("注册成功,即将跳转到抽奖页面", {
                        time: 3000
                    })
                    $("#param1").val(phone);
                    $("#param2").val(data.msg);
                    $("#param3").val(code);
                    window.setTimeout( function(){
                        $("#eventlogin").submit();
                    }, 3500);
                }
            }
        });
    }

    //session获取iframe处理
    $(function () {
        //判断一下当前是不是做顶层，如果不是，则做一下顶层页面重定向
        if (window != top) {
            top.location.href = location.href;
        }
    });
</script>
</body>
</html>